<template>
    <view :style="{ '--bgcolor': pageData.bgColor, '--price-color': pageData.priceColor || '#E90B08', '--color': color, '--back-color': $common.hexToRgba(color, 0.1) }" 
        v-if="infoData.length">
        <!-- 一行两个 -->
        <view class="content d-flex f-wrap j-sb" v-if="pageData.listStyle == 2" :style="{ '--height-2': pageData.picScale || 1 }">
            <view class="list m-bot20" :class="{ shadow: pageData.shadow == 1 }" v-for="(item, index) in infoData" :key="index" @click="toGoods(item)">
                <image :src="$imgUrls(item.img)" mode="aspectFill" class="list_img bor_radius_top10"></image>
                <view class="mask2" v-if="!item.stock">
                    <image :src="imgUrl + 'sold.png'" class="sold2"></image> 
                </view>
                <view class="cont rows d-flex f-column padding10 j-sb">
                    <view class="black size30 ellipsis_2" :style="{ 'font-weight': pageData.fontWeight || 300 }">{{ item.name }}</view>
                    <view class="row a-center m-top10">
                        <view class="flex-1">
                            <text class="price size26" v-if="!pageData.hidePrice">￥</text>
                            <text class="price size34 bold500" v-if="!pageData.hidePrice">{{ parseFloat(item.price) }}</text>
                            <text class="h6 color_77 bold300" v-if="item.unit && !pageData.hideUnit">/{{ item.unit }}</text>
                            <!-- <text class="size26 line-through color_C0 m-left10">￥{{parseFloat(item.full_price)}}</text> -->
                            <view class="h6 color_77 bold300 m-left10 d-inline-block" v-if="item.sales_number && !pageData.hideSales">已售{{ item.sales_number }}</view>
                        </view>
                        <view class="iconfont size42 bold500" :class="pageData.btnName ? pageData.btnName : 'icon-gouwuche2'" :style="{ color: pageData.btnColor || '#E90B08' }"></view>
                    </view>
                    <view class="profit_title m-top20" v-if="pageData.showPriceInfo">
                        <view class="flex-1">{{ item.profitTitle }}</view>
                        <view class="share flexac">分享</view>
                    </view>
                </view>
            </view>
        </view>
        <!-- 一行一个 -->
        <view class="content" v-if="pageData.listStyle == 1">
            <view class="list1 row bgwhite bor_radius_10 m-bot20" :class="{ shadow: pageData.shadow == 1 }" v-for="(item, index) in infoData" :key="index" @click="toGoods(item)">
                <image :src="$imgUrls(item.img)" mode="aspectFill" class="list_imgs bor_radius_left10"></image>
                <view class="mask1" v-if="!item.stock"></view>
                <image :src="imgUrl + 'sold.png'" class="sold1" v-if="!item.stock"></image>
                <view class="flex-1 m-left20 p-right20 d-flex j-sb f-column">
                    <view class="rows m-top20">
                        <text class="black size32 ellipsis_2" :style="{ 'font-weight': pageData.fontWeight || 300 }">{{ item.name }}</text>
                        <text class="color_77 size28 m-top20 ellipsis bold300">{{ item.info }}</text>
                    </view>
                    <view class="row j-sb a-center m-bot20">
                        <view>
                            <text class="price size26" v-if="!pageData.hidePrice">￥</text>
                            <text class="price size34 bold500" v-if="!pageData.hidePrice">{{ parseFloat(item.price) }}</text>
                            <text class="h6 color_77 bold300" v-if="item.unit && !pageData.hideUnit">/{{ item.unit }}</text>
                            <text class="size26 line-through color_C0 bold300 m-left10" v-if="!pageData.hidePrice">￥{{ parseFloat(item.full_price) }}</text>
                            <view class="h6 color_77 bold300 m-top10" v-if="item.sales_number && !pageData.hideSales">已售{{ item.sales_number }}</view>
                        </view>
                        <view class="iconfont size42 bold500" :class="pageData.btnName ? pageData.btnName : 'icon-gouwuche2'" :style="{ color: pageData.btnColor || '#E90B08' }"></view>
                    </view>
                </view>
            </view>
        </view>
        <!-- 一行三个 -->
        <view class="content" v-if="pageData.listStyle == 3">
            <view class="bgwhite bor_radius_20" :class="{ shadow: pageData.shadow == 1 }" style="padding: 0 20rpx 30rpx">
                <view class="d-flex a-center p-top30" v-if="pageData.title">
                    <view class="flex-1 size32 bold">{{ pageData.title }}</view>
                    <view class="m-left20 color_99" @click="toCates">
                        <text>更多</text>
                        <text class="iconfont icon-xiangyouxiayiye h6"></text>
                    </view>
                </view>
                <view class="d-flex f-wrap">
                    <view class="list3 m-top30" v-for="(item, index) in infoData" :key="index" @click="toGoods(item)">
                        <image :src="$imgUrls(item.img)" mode="aspectFill" class="bor_radius_10 m-bot10"></image>
                        <view class="size28 ellipsis m-bot10" :style="{ 'font-weight': pageData.fontWeight || 300 }">{{ item.name }}</view>
                        <view class="m-bot10">
                            <text class="price size30 bold500" v-if="!pageData.hidePrice">￥{{ parseFloat(item.price) }}</text>
                            <text class="h6 color_77 bold300" v-if="item.unit && !pageData.hideUnit">/{{ item.unit }}</text>
                        </view>
                        <view class="h6 color_77 bold300 m-bot10" v-if="!pageData.hideSales">已售{{ item.sales_number }}</view>
                        <view class="profit_title" v-if="pageData.showPriceInfo">{{ item.profitTitle }}</view>
                    </view>
                </view>
            </view>
        </view>
        <!-- 大图模式 -->
        <view class="content" v-if="pageData.listStyle == 4" :style="{ '--height-4': pageData.picScale || 0.6667 }">
            <view class="list_4 p-re bgwhite bor_radius_10 m-bot20" :class="{ shadow: pageData.shadow == 1 }" v-for="(item, index) in infoData" :key="index" @click="toGoods(item)">
                <image :src="$imgUrls(item.img)" mode="aspectFill" class="bor_radius_top10"></image>
                <view class="mask4 bor_radius_10" v-if="!item.stock">
                    <image :src="imgUrl + 'sold.png'" class="sold4"></image>
                </view>
                <view class="padding20">
                    <view class="black size36 ellipsis" :style="{ 'font-weight': pageData.fontWeight || 500 }">{{ item.name }}</view>
                    <view class="color_33 size30 ellipsis m-top12 bold300">{{ item.info }}</view>
                    <view class="row j-sb a-center m-top30">
                        <view>
                            <text class="price size30" v-if="!pageData.hidePrice">￥</text>
                            <text class="price size38 bold500" v-if="!pageData.hidePrice">{{ parseFloat(item.price) }}</text>
                            <text class="h6 color_77 bold300" v-if="item.unit && !pageData.hideUnit">/{{ item.unit }}</text>
                            <text class="size30 line-through color_C0 bold300 m-left10" v-if="!pageData.hidePrice">￥{{ parseFloat(item.full_price) }}</text>
                            <text class="h6 color_77 bold300 m-left30" v-if="item.sales_number && !pageData.hideSales">已售{{ item.sales_number }}</text>
                        </view>
                        <view class="iconfont size46 bold500" :class="pageData.btnName ? pageData.btnName : 'icon-gouwuche2'" :style="{ color: pageData.btnColor || '#E90B08' }"></view>
                    </view>
                </view>
            </view>
        </view>
        <!-- 榜单 -->
        <view class="content" v-if="pageData.listStyle == 5">
            <view class="rank bor_radius_20 p-top30 p-left20" :style="{ backgroundImage: pageData.img ? 'url(' + pageData.img + ')' : 'url(' + imgUrl + 'goods_rank_bg.png' + ')' }">
                <view class="size36 bold t-letter4 m-bot40 ellipsis" v-if="pageData.title" :style="{ color: pageData.titColor || 'white' }">{{ pageData.title }}</view>
                <view style="height: 88rpx" v-else></view>
                <swiper class="swiper" next-margin="160rpx">
                    <swiper-item v-for="(group, index) in groups" :key="index">
                        <view class="swiper-item bor_radius_20">
                            <view class="m-bot24 d-flex p-re" v-for="item in group" :key="item.goods_id" @click="toGoods(item)">
                                <image :src="$imgUrls(item.img)" mode="aspectFill" class="pic"></image>
                                <view class="mask5" v-if="!item.stock"></view>
                                <image :src="imgUrl + 'sold.png'" class="sold5" v-if="!item.stock"></image>
                                <view class="flex-1 p-left20 p-top12">
                                    <view class="size28 color_22 ellipsis m-bot20" :style="{ 'font-weight': pageData.fontWeight || 300 }">{{ item.name }}</view>
                                    <view>
                                        <text class="price size30 bold500" v-if="!pageData.hidePrice">￥{{ parseFloat(item.price) }}</text>
                                        <text class="h6 color_77 bold300" v-if="item.unit && !pageData.hideUnit">/{{ item.unit }}</text>
                                    </view>
                                    <view class="btn size36 p-ab iconfont" :class="pageData.btnName ? pageData.btnName : 'icon-gouwuche2'" :style="{ color: pageData.btnColor || '#E90B08' }"></view>
                                </view>
                            </view>
                        </view>
                    </swiper-item>
                </swiper>
            </view>
        </view>
        <!-- 卡片轮播 -->
        <view class="content" v-if="pageData.listStyle == 6">
            <swiper class="cardSwiper" :current="current" previous-margin="120rpx" next-margin="120rpx" circular @change="swiperChange">
                <swiper-item v-for="(item, index) in infoData" :key="index">
                    <view class="item wh padding30 bgwhite bor_radius_10 text-center" @click="toGoods(item)" :class="{ active: current == index, shadow: pageData.shadow == 1 }">
                        <image :src="$imgUrls(item.img)" mode="aspectFill" class="pic"></image>
                        <view class="size30 ellipsis m-top10" :style="{ 'font-weight': pageData.fontWeight || 300 }">{{ item.name }}</view>
                        <view class="m-top10 m-bot10">
                            <text class="price size30 bold500" v-if="!pageData.hidePrice">￥{{ parseFloat(item.price) }}</text>
                            <text class="h6 color_77 bold300" v-if="item.unit && !pageData.hideUnit">/{{ item.unit }}</text>
                            <text class="h6 color_77 bold300 m-left10" v-if="item.sales_number && !pageData.hideSales">已售{{ item.sales_number }}</text>
                        </view>
                        <view class="btn white d-inline-block" :style="{ background: pageData.btnColor || '#E90B08' }">
                            <text class="iconfont h6 m-right8" :class="pageData.btnName ? pageData.btnName : 'icon-gouwuche2'"></text>
                            <text>{{ item.price_name || '立即购买' }}</text>
                        </view>
                    </view>
                </swiper-item>
            </swiper>
            <view class="flexac m-top30">
                <view class="indicator bor_radius_10" :class="{ active: current == index }" @click="current = index" v-for="(item, index) in infoData" :key="index">
                    <image :src="$imgUrls(item.img)" mode="aspectFill"></image>
                </view>
            </view>
        </view>
        <!-- 一行两个(居中) -->
        <view class="content d-flex f-wrap j-sb" v-if="pageData.listStyle == 7" :style="{ '--height-2': pageData.picScale || 1 }">
            <view class="list text-center m-bot20" :class="{ shadow: pageData.shadow == 1 }" v-for="(item, index) in infoData" :key="index" @click="toGoods(item)">
                <image :src="$imgUrls(item.img)" mode="aspectFill" class="list_img bor_radius_top10"></image>
                <view class="mask2" v-if="!item.stock">
                    <image :src="imgUrl + 'sold.png'" class="sold2"></image>
                </view>
                <view class="black size26 ellipsis_2 m-top10" :style="{ 'font-weight': pageData.fontWeight || 300 }">{{ item.name }}</view>
                <view class="m-top10">
                    <text class="price size26" v-if="!pageData.hidePrice">￥</text>
                    <text class="price size34 bold500" v-if="!pageData.hidePrice">{{ parseFloat(item.price) }}</text>
                    <text class="h6 color_77 bold300" v-if="item.unit && !pageData.hideUnit">/{{ item.unit }}</text>
                    <text class="h6 color_77 bold300 m-left10 line-through" v-if="!pageData.hidePrice">￥{{ parseFloat(item.full_price) }}</text>
                    <view class="h6 color_77 bold300 m-left10 d-inline-block" v-if="item.sales_number && !pageData.hideSales">已售{{ item.sales_number }}</view>
                </view>
                <view class="btn flexac size28" :style="{ '--btn-color': pageData.btnColor || '#E90B08' }">购买</view>
            </view>
        </view>
        <showModel @cancelFunc="showModal = false" goHome="0" v-if="showModal" type="2"></showModel>
    </view>
</template>

<script>
    import { mapState, mapMutations } from 'vuex';
    import Api from '@/common/Api.js';
    export default {
        name: 'product',
        props: ['pageData'],
        data() {
            return {
                showModal: false,
                infoData: [],
                groups: [],
                imgUrl: this.imgUrl + 'Uploads/diy/img/',
                current: 0,
                openBusinessView: {
                    businessType: '',
                    queryString: ''
                },
                extraData: {
                    headSupplierAppid: '', // 需要填入您的机构appid
                    commissionType: 1, // 1代表机构自己分佣
                    commissionRatio: 0 // 机构自己分佣时设为0
                }
            };
        },
        computed: {
            ...mapState(['color', 'vid'])
        },

        async mounted() {
            this.getBlockInfo();
            const requestResult = await Api.getUserBindInfo();
            if (!requestResult || requestResult.user_status == 4) return;
            const result = requestResult.data;

            this.openBusinessView = {
                businessType: result.businessType,
                queryString: result.queryString
            };
            this.extraData = {
                headSupplierAppid: result.extraData.headSupplierAppid,
                commissionType: result.extraData.commissionType,
                commissionRatio: result.extraData.commissionRatio
            };
        },
        methods: {
            ...mapMutations(['setHome']),
            async getBlockInfo() {
                const result = await this.$getBlockInfo(this.pageData.list);
                if (result.list && !result.list.length) {
                    this.infoData = [];
                    this.groups = [];
                    return;
                }
                this.infoData = result.list || [];
                if (this.pageData.listStyle == 5) {
                    this.groups = [];
                    let size = 4;
                    for (let i = 0; i < this.infoData.length; i += size) {
                        let group = this.infoData.slice(i, i + size);
                        this.groups.push(group);
                    }
                }
            },
            swiperChange(e) {
                this.current = e.detail.current;
            },
            async toGoods({ goods_id, goods_cate, share_verification, myData }) {
                // 维修预约
                if (goods_cate == 5) return this.toUrl('/zunyi/details?goods_id=' + goods_id);
                // 服务预约
                if (goods_cate == 4) {
                    if (!this.vid) return this.setHome({ showMode: true });
                    this.toUrl('/orderPage/order/submitReserve?goods_id=' + goods_id);
                    return;
                }
                // 推客
                if (goods_cate == 6) {
                    this.ShareBtn({ myData, share_verification, goods_id })
                    return;
                }
                // 普通商品
                let path = '/pages/goods/goods_detail?isHome=1&goodsid=' + goods_id;
                if (this.pageData.mode == 1) path = path + '&mode=1';
                if (this.pageData.mode == 2) path = path + '&mode=1&scan=1';
                this.toUrl(path);
            },
            toCates() {
                if (!this.pageData.mode) {
                    let arr = this.infoData.map((item) => item.up_classify_id);
                    let classifyId = '';
                    if (new Set(arr).size == 1) classifyId = [...new Set(arr)][0];
                    this.$rectTo('/pages/classify/classify?classifyId=' + classifyId);
                }
                if (this.pageData.mode == 1) this.$rectTo('/pages/classify/repast');
                if (this.pageData.mode == 2) this.toUrl('/otherPage/custom/placeOrder');
                if (this.pageData.mode == 3) this.toUrl('/orderPage/order/serviceReserve');
                if (this.pageData.mode == 4) this.toUrl('/zunyi/index');
            },
            async ShareBtn(Item) {
                const myData = Item.myData;
                if (Item.share_verification == 1 && !myData.sharer_appid) {
                    const reuslt = await this.$Modals('您还未授权成为推客', '成为推客后分享商品可产生收益');
                    if (reuslt) this.Business();
                    return;
                } else {
                    this.toUrl(`/weiDian/weiShare?goods_id=${Item.goods_id}`);
                }
            },
            Business() {
                if (!this.openBusinessView.businessType) {
                    console.log('businessType为空');
                    this.$Toast('未获取到正确的商家信息');
                    return;
                }
                this.$pop.openBusinessView(this.openBusinessView.businessType, this.openBusinessView.queryString, this.extraData);
            }
        }
    };
</script>

<style lang="scss" scoped>
    .content {
        width: 100%;
        padding: 30rpx;
        background: var(--bgcolor);
    }
    // 一行两个
    .list {
        width: 332rpx;
        // height: 500rpx;
        background-color: #ffffff;
        display: flex;
        flex-direction: column;
        border-radius: 10rpx;
        overflow: hidden;
        position: relative;
        .cont {
            min-height: 168rpx;
        }
        .sold2 {
            width: 148rpx;
            height: 148rpx;
            position: absolute;
            left: 50%;
            top: 50%;
            margin: -74rpx 0 0 -74rpx;
        }
        .btn {
            width: 106rpx;
            height: 56rpx;
            border-radius: 30rpx;
            border: 1rpx solid var(--btn-color);
            color: var(--btn-color);
            margin: 20rpx auto;
        }
    }
    .list_img,
    .mask2 {
        width: 332rpx;
        height: calc(var(--height-2) * 332rpx);
    }
    // 一行一个
    .list1 {
        position: relative;
        .sold1 {
            width: 148rpx;
            height: 148rpx;
            position: absolute;
            top: 50%;
            margin-top: -74rpx;
            left: 72rpx;
        }
    }
    .list_imgs,
    .mask1 {
        width: 292rpx;
        height: 292rpx;
    }
    // 一行三个
    .list3 {
        width: 200rpx;
        image {
            width: 200rpx;
            height: 200rpx;
        }
        &:not(:nth-child(3n)) {
            margin-right: 25rpx;
        }
    }
    // 大图模式
    .list_4 {
        width: 690rpx;
        image,
        .mask4 {
            width: 690rpx;
            height: calc(var(--height-4) * 690rpx);
        }
        .sold4 {
            width: 200rpx;
            height: 200rpx;
            position: absolute;
            left: 50%;
            top: 50%;
            margin: -100rpx 0 0 -100rpx;
        }
    }
    .mask1,
    .mask2,
    .mask4,
    .mask5 {
        background: rgba(0, 0, 0, 0.4);
        position: absolute;
        top: 0;
        left: 0;
    }
    .shadow {
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
    }
    // 榜单
    .rank {
        height: 800rpx;
        background-repeat: no-repeat;
        background-size: cover;
        .swiper {
            height: 650rpx;
            .swiper-item {
                width: 480rpx;
                height: 650rpx;
                background: rgba(255, 255, 255, 0.76);
                padding: 24rpx 28rpx 0 24rpx;
                .pic,
                .mask5 {
                    width: 130rpx;
                    height: 130rpx;
                }
                .sold5 {
                    width: 80rpx;
                    height: 80rpx;
                    position: absolute;
                    top: 50%;
                    margin-top: -40rpx;
                    left: 25rpx;
                }
                .btn {
                    right: 0;
                    top: 80rpx;
                    z-index: 10;
                }
            }
        }
    }
    // 卡片轮播
    .cardSwiper {
        height: 600rpx;
        .item {
            transform: scale(0.8);
            transition: transform 0.3s ease-in-out 0s;
            &.active {
                transform: scale(0.99);
            }
            .pic {
                height: 390rpx;
            }
            .btn {
                height: 44rpx;
                line-height: 44rpx;
                padding: 0 16rpx;
                border-radius: 22rpx;
            }
        }
    }
    .indicator {
        width: 80rpx;
        height: 80rpx;
        margin: 0 8rpx;
        box-sizing: content-box;
        &.active {
            border: 2rpx solid var(--color);
        }
    }
    .price {
        color: var(--price-color);
    }
    .profit_title {
        height: 68rpx;
        background: var(--back-color);
        border-radius: 10rpx;
        overflow: hidden;
        font-weight: 600;
        color: var(--color);
        display: flex;
        align-items: center;
        padding-left: 10rpx;
        .share {
            height: 100%;
            background: var(--color);
            font-size: 28rpx;
            color: white;
            padding: 0 12rpx;
        }
    }
</style>
